<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-02-06 21:40:59
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-07 06:40:35
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL-002</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <!-- <script type="x-shader/x_vertex" id="vshader_src">
        void main(){
            gl_Position = vec4(0.0,0.0,0.0,1.0);// 设置坐标
            gl_PointSize = 100.0;// 设置点的大小
        }
    </script>
    <script type="x-shader/x-fragment" id="fshader_src">
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);// 设置颜色
        }
    </script> -->
</head>

<body>
    <canvas id="canvas"></canvas>
    <script type="module">
        import * as shader_4 from "./shader_4.glsl.js";
        import { dat } from "../../libs/dat.gui.js";

        var ctrl = new dat.GUI();
        var backgroundCtrlObj = { backColor: 0xffffff };
        var backgroundGroup = ctrl.addFolder("background");
        backgroundGroup.addColor(backgroundCtrlObj, "backColor").onChange(function (value) {
            //   value是一个颜色值
            var r = (value & 0xff0000) >> 16;
            var g = (value & 0xff00) >> 8;
            var b = (value & 0xff);

            gl.clearColor(r / 255, g / 255, b / 255, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.POINTS, 0, 1);
        });



        // 第一步 获取canvas元素
        var cvs = document.getElementById("canvas");
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        // 第二步 创建webgl绘图上下文
        const gl = cvs.getContext('webgl');
        // 设置上下文gl对象的视口与清除色，并清除画布
        gl.viewport(0, 0, cvs.width, cvs.height);
        gl.clearColor(0.0, 1.0, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 第四步 创建顶点缓冲区对象 获取顶点着色器代码字符串，创建顶点着色器对象，赋值，编译
        // var vshader_src = document.getElementById("vshader_src").innerHTML;
        var vshader_src = shader_4.vertex;
        var vshader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vshader, vshader_src);
        gl.compileShader(vshader);
        // 第五步 创建片元缓冲区对象 创建偏远着色器代码字符串，创建片元着色器对象，赋值，编译
        // var fshader_src = document.getElementById("fshader_src").innerHTML;
        var fshader_src = shader_4.fragment;
        var fshader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fshader, fshader_src);
        gl.compileShader(fshader);
        // 第六步 创建gl程序对象，将顶点着色器和片元着色器链接到程序对象
        var glProgram = gl.createProgram();
        gl.attachShader(glProgram, vshader);
        gl.attachShader(glProgram, fshader);
        // 第七步 链接着gl序对象
        gl.linkProgram(glProgram);
        // 第八步 将gl程序对象设置为当前渲染状态
        gl.useProgram(glProgram);
        //  第九步 正式开始绘制
        gl.drawArrays(gl.POINTS, 0, 1);


        window.addEventListener("resize", resizeCanvas, false);
        function resizeCanvas() {
            cvs.width = window.innerWidth;
            cvs.height = window.innerHeight;
            gl.viewport(0, 0, cvs.width, cvs.height);
        }
    </script>

</body>

</html>